<template>
	<view class="radio-group">
		<text class="radio-item" :class="{active: checked === item.value}" v-for="item in lists" :data-value="item.value" @tap="onChange">{{item.title}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
			lists: {
				type: Array,
				default() {
					return []
				}
			},
			checked: {
				type: String/Number,
				default: ''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			onChange(e) {
				let value = e.currentTarget.dataset.value
				this.$emit('change', {
					name: this.name,
					value: value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.radio-group {
		margin: 10rpx 0;
		.radio-item {
			padding: 14rpx 30rpx;
			text-align: center;
			color: #444;
			background: #fff;
			border: 1px solid #eee;
			margin-right: -1px;
			font-size: 28rpx;
			&:first-child {
				border-top-left-radius: 12rpx;
				border-bottom-left-radius: 12rpx;
			}
			&:last-child {
				border-top-right-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
			}
			
			&.active {
				background: #04BABE;
				color: #fff;
			}
		}
	}
</style>